<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="initial-scale=1, width=device-width, minimum-scale=1, maximum-scale=1.0, user-scalable=no"
			charset="UTF-8" http-equiv="Content-Type">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 		<title>智能控制器</title> -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/person.css">
		<!-- <link type="text/css" rel="stylesheet" href="css/weather.css"> -->
		<script src="js/jquery-3.6.0.min.js"></script>
		<!-- 		<script src="js/bootstrap.min.js"></script> -->
		<!--<script src="js/websocket.js"></script>-->
		<script src="js/flexible.js"></script>
		 <script src="js/mqtt.js"></script> 
		<script src="js/main.js"></script>
	</head>
	<body>
		<!-- style="background-image: linear-gradient(to bottom, #187ec7,#3e7db4,#70ABDF);
						font-family: 微软雅黑;height: 100vh;" -->
		<div class="title">
			<span>下一代智能站展示系统</span>
		</div>
		<div align="center" id="">
			
broker-cn
		</div>
		<div class="Flex-row part1">

			<div class="Local_info">
				<div id="zhname">
					下一代智能站
				</div>
				<div id="time">
					2022-07-07 00：00：00
				</div>
			</div>
			<div class="Status">
				<div class="" style="">
					<span>采集器：</span>
					<span>网络状态：</span>
					<!-- <span>传感器状态：</span> -->
				</div>
				<div class=" ">
					<span class="label label-danger" id="APPstatus">未连接</span>
					<span class="label label-danger" id="Networkstatus">异常</span>
					<!-- <span class="label label-danger" id="Sensorstatus">异常</span> -->
				</div>
			</div>
		</div>
		<div class="BoxWrap">
		    <div class="horn">
	
		       <div class="lt"></div>
		       <div class="rt"></div>
		       <div class="rb"></div>
		       <div class="lb"></div>
		    </div>

			<div class="Element">	
				<div class="" style="">
					<div>
						<img src="static/rain.png" alt="" style="">
					</div>

					<span>雨量 ：</span>
					<span id="rain" class="data">32</span>
				</div>
				<div class="" style="">
					<div>
						<img src="static/wd.png" alt="" style="">
					</div>

					<span>风向 ：</span>
					<span id="wind_1"  class="data">32</span>
				</div>
				<div class="" style="">
					<div>
						<img src="static/whirlwind (1).png" alt="" style="">
					</div>

					<span>风速 ：</span>
					<span id="wind_2"  class="data">32</span>
				</div>
				<div class="" style="">

					<div class="" style="">
						<img src="static/tt.png" alt="" style="">

					</div>

					<span style="">温度 ：</span>


					<span id="tt_1"  class="data">32</span>

				</div>
				<div class="" style="">
					<div class="" style="">
						<img src="static/RH1.png" alt="" style="">
					</div>

					<span>湿度 ：</span>


					<span id="rh_1" class="data">32</span>

				</div>
				<!--<div class="" style="">
					<div class="" style="">
						<img src="static/ground-tt.png" alt="" style="height: 1.2rem;width: 1.2rem;top: -0.2rem;left: -0.1rem;">
					</div>
				
					<span style="transform: translateX(-10%);">地温 ：</span>
				
				
					<span id="st_1" class="data" >32</span>
				
				</div>-->
				<div class="" style="margin-bottom: 0.5rem;">
					<div class="" style="">
						<img src="static/ppp.png" alt="" style="">
					</div>

					<span>气压 ：</span>

					<span id="pp_1" class="data">32</span>

				</div>
</div>
			</div>



		</div>
		<div class="privilege">
		<p>广东省气象探测数据中心 | 版权所有</p>	
		</div>


		</div>
	</body>
	<script type="text/javascript">
		document.addEventListener('plusready', function(){
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			
		});
//		setInterval(function() {
//			GetNowTime();
//
//		}, 1000)
//		setInterval(function() {
//			if(websocket.readyState==1)	websocket.send("wifi,getdata");
//			else{
//				reconnect(wsUri);
//			}
//		}, 5000)
	</script>
	<style type="text/css">

	</style>
</html>
<script type="text/javascript">
	 const options = {
        clean: true, // true: 清除会话, false: 保留会话
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: Math.random().toString(36).substr(3, 10),	//客户端ID
//      username: 'admin', //连接用户名
//      password: 'public',//连接密码，默认为public,新版本登录后台界面会让你修改密码
        // 心跳时间
        keepalive: 60,
    }

    // 连接字符串, 通过协议指定使用的连接方式
//  const connectUrl = 'wss://broker.emqx.io:8084/mqtt' //连接服务端地址，注意查看ws协议对应的端口号
    const connectUrl = 'ws://47.92.5.227:8083/mqtt' //连接服务端地址，注意查看ws协议对应的端口号
    const client = mqtt.connect(connectUrl, options)

    client.on('connect', () => {
        console.log('连接成功')
//      alert('连接MQTT成功')
        // 订阅多个主题
        client.subscribe(
            ['mqttyjstestclientG9999/#'], //主题
            { qos: 0 },  
            (err) => {
                console.log(err || '订阅成功')
            },
        );
        $('#Networkstatus').attr("class", "label label-success");
		$('#Networkstatus').html("正常");
       
    })
	//失败重连
    client.on('reconnect', (error) => {
        console.log('正在重连:', error)
        
    })
	//连接失败
    client.on('error', (error) => {
    	$('#Networkstatus').attr("class", "label label-danger");
		$('#Networkstatus').html("异常");
        console.log('连接失败:', error)
        alert('连接失败:', error)
    })
	//接收消息
    client.on('message', (topic, message) => {
        console.log('收到消息：', topic, message.toString())
        decodebw(message.toString()) 
    })    
    function decodebw(msg) {
		
		var reg = /BG,.+,ED/;
		ysjson = {};
//		msg = "BG,59751,03,YAWS,000,20220713082500,001,047,40,AAA,0299,AAAa,0299,AAAb,0825,AAAc,0295,AAAd,0811,Da,0299,Db,0825,Dc,0274,Dd,0513,ADA,094,ADAa,097,ADAb,0818,ADAc,093,ADAd,0822,ADB,0288,ADC,0397,AEA,144,AEB,143,AEC,122,AED,091,AEE,135,AEF,129,AEG,091,De,068,Df,120,AFA,031,AFAa,034,AFAe,039,AFAf,0803,AFB,022,AFC,020,AFD,019,AFDa,019,AFDb,0825,Dg,089,Dh,2307,Di,034,Dj,2248,AGA,09987,AGAa,09987,AGAb,0825,AGAc,09986,AGAd,0824,AHA,000,AHB,0000,AHM,00000000000000000000000000000000000000000000000000,Dk,00000,11111111111111111111111111111111111111111111111,z,0,y,0,y_AAA,0,y_ADA,0,y_AFA,0,y_AGA,0,y_AHA,0,rJ_AA,0,rJ_AD,0,Rs,12,Ya,0,Yb,0,Yc,0,Yd,0,Ye,0,Yf,0,Yg,0,Yh,0,Yi,2,Yj,0,Yk,9,Y5,0,Y6,7F,X1,081,X2,028,X3,137,X4,218,X5,375,T1r,00000,T1t,04171,T1z,0844,T2r,0000,T2t,01195,T2z,0238,T3r,0000,T3t,00441,T3z,0102,Z1,00000000,Z2,03091554,Z3,20200325Q,8573,ED";
		var reg = /BG,.+,ED/;
		if(reg.test(msg)) {
			result = reg.exec(msg);
			resultmsg = result[0];
			list = resultmsg.split(",");
			for(i = 9; i < list.length; i++) {
//				console.log(list[i])
				ysjson[list[i]] = list[i + 1]
				i++
			}
			recdata={};
			recdata["ZH"] = list[1];
			recdata["TT"] = (ysjson["AAA"])/10.0;
			recdata["WD"] = ysjson["AED"];
			recdata["WS"] = ysjson["AFD"]/10.0;
			recdata["RF"] = ysjson["AHB"]/10.0;
			recdata["RH"] = ysjson["ADA"]/10.0*10;
			recdata["PP"] = ysjson["AGA"]/10.0;
			timetemp =list[5];
			year = timetemp.substring(0,4);
			month = timetemp.substring(4,6);
			day = timetemp.substring(6,8);
			hour = timetemp.substring(8,10);
			min = timetemp.substring(10,12);
			
			recdata["DT"] = year+"-"+month+"-"+day+" "+hour+":"+min+":00";
			jsondata = recdata;
			
			getdatashow(jsondata);
			
			
		} else
			return;

	}
</script>
